<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>判断组件继承</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>

<div class="container" id="main-bd">

    <picker
            :menu-data="menuItem"
    ></picker>
</div>
<script type="text/x-template" id="pik">
    <div>
        我是picker组件
    </div>
</script>
<script src="js/vue.js"></script>
<script>
    Vue.component("picker",{
        template:"#pik",
        props:["menuData"],
        computed:{
            mobile:function (){
                return this.menuData.text;
            }
        },
        watch:{
            mobile:function(v,ov){
                console.log(v,ov);
            }
        }
    });
    new Vue({
        el:'#main-bd',
        data:function(){
            return {
                isParent:true,
                currentGroupID:0,
                currentMenuID:0,
                menu:[
                    {
                        text:"以及父亲目录",
                        submenu:[
                            {text:"15165811518"},
                            {text:"15165811515"},
                            {text:"15165811516"}
                        ]
                    },
                    {
                        text:"二级父亲目录",
                        submenu:[
                            {text:"张全蛋"},
                            {text:"赵铁柱"},
                            {text:"李小花"}
                        ]
                    },
                    {
                        text:"三级父亲目录",
                        submenu:[
                            {text:"张全蛋"},
                            {text:"赵铁柱"},
                            {text:"李小花"}
                        ]
                    }
                ]

            }
        },
        computed: {
            menuItem: function () {
                return this.menu[this.currentGroupID].submenu[this.currentMenuID];

            }
        }


    });


</script>
</body>
</html>